<template>
  <div>
    商品库存：
    <input type="text" v-model="num">
    {{ num }}
    <hr>
    <button @click="num=0">库存清0</button>
    <hr>
    <select v-model="sex">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
    {{ sex }}
    <hr>
    你住在上铺还是下铺：
    <label>
      <input type="radio" value="up" v-model="updown">
      上铺
    </label>
    <label>
      <input type="radio" value="down" v-model="updown">
      下铺
    </label>
    {{ updown }}
    <hr>
    你爱看的电视是：
    <label>
      <input type="checkbox" value="甄嬛传" v-model="arr">甄嬛传
    </label>
    <label>
      <input type="checkbox" value="西游记" v-model="arr">西游记
    </label>
    <label>
      <input type="checkbox" value="水浒传" v-model="arr">水浒传
    </label>
    {{ arr }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const num = ref(0);

const sex = ref(2);
// 上下铺
const updown = ref("down");

// 数组  
// 回显
const arr = ref(["水浒传"]);
</script>

<style lang="scss" scoped>

</style>